
import { Tag, Descriptions, Input, Button, message, Spin } from "antd"
import { useState } from "react";
import { LoadingOutlined } from '@ant-design/icons';
import { AddAdmin } from "../../api/admin";
/**
 * 
 * @returns 管理员新增页面
 */
const AdminAdd=()=>{
    document.info = [
        {
            title:"管理员-新增",
            url: "/admin/add",
        },
        {
            title: "管理员",
            url: "/admin",
        }
      ]

      const [users, setUser] = useState({
        name: "",
        account: "",
        explain: "",
    });
    const [loading, setLoading] = useState(false);
    //设置名称
    const getName = (e) => {
        setUser((users) => ({ ...users, name: e.target.value }));
    }
    //设置手机号
    const getAccount = (e) => {
        setUser((users) => ({ ...users, account: e.target.value }));
    }
    //设置联系人
    const getExplain=(e)=>{
        setUser((users) => ({ ...users, explain: e.target.value }));
    }


    const addSupplier = async () => {
        setLoading(true);
        const res = await AddAdmin({...users});
        if (res?.result === 0) {
            message.success("操作成功");
            setUser({
                name: "",
                account: "",
                explain: "",
            })
            setLoading(false);
        } else {
            message.error(res.message);
            setLoading(false);
        }
    }


    //描述列表
    const items = [
        {
            key: '1',
            label: '名称',
            span: 3,
            children:
                <Input onChange={(e) => getName(e)} value={users.name}></Input>
       
            },
        {
            key: '2',
            label: '电话',
            span: 3,
            children: <Input onChange={(e) => getAccount(e)} value={users.account} maxLength={11}></Input>
        },
        {
            key: '3',
            label: '描述',
            span: 3,
            children: <Input.TextArea maxLength={500} onChange={(e) => getExplain(e)} value={users.explain} ></Input.TextArea>
        },
        {
            key: '5',
            label: '行为',
            span: 3,
            children: <Button type="primary" onClick={() => { addSupplier() }} disabled={users.account.length != 11 || users.name == "" }>新增</Button>
        }
    ]

    return (
        <>
            <div className="Containers">
                <Spin
                    spinning={loading}
                    indicator={
                        <LoadingOutlined
                            style={{
                                fontSize: 24,
                            }}


                        />
                    }
                >
                    <div className='pds'>
                        <Descriptions title="新增管理员" layout="vertical" bordered items={items} />
                    </div></Spin>
            </div>
        </>

    )
}


export default AdminAdd